
<template>
  <div>

    <!-- 顶部滑动条区域 -->
    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a @click.prevent="comName='one'" class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							第一个
						</a>
						<a @click.prevent="comName='two'" class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							第二个
						</a>
						<a @click.prevent="comName='three'" class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							第三个
						</a>
						<a @click.prevent="comName='four'" class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							第四个
						</a>
						<a @click.prevent="comName='five'" class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							第五个
						</a>

					</div>
				</div>

		</div>

      <!-- <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in projectlist" :key="item.id">
        <router-link :to="'/project/projectlist/' + item.id">
          <img class="mui-media-object mui-pull-left" :src="item.img_src">
          <div class="mui-media-body">
            <h1>{{item.title}}</h1>
            <p class='mui-ellipsis'>
              <span>项目描述：{{item.desc}}</span>
            </p>
          </div>
        </router-link>
      </li>

    </ul> -->
  <!-- vue 提供的占位符  conponent  is 属性，用来指定要展示的名称 -->
  <!-- is 用属性绑定  后面放个变量-->
  <component :is="comName"></component>


  </div>
</template>

<script>
// 导入 mui-js
import mui from "../../lib/mui/js/mui.min.js"
// 初始化，滑动组件

// 导入组件
import one from "../navbar/oneContainer.vue"
import two from "../navbar/twoContainer.vue"
import three from "../navbar/threeContainer.vue"
import four from "../navbar/fourContainer.vue"
import five from "../navbar/fiveContainer.vue"

export default {
  data(){
    return {
      // 展示组件名称的变量
      comName:"one"
    }
  },
  created(){

  },
  mounted(){
    // 当组件中的 dom 结构渲染好，挂载到页面上，在执行初始化
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods:{
  
    
  },
  components:{
    one:one,
    two:two,
    three:three,
    four:four,
    five:five
  }
}
</script>


<style lang="scss" scoped>
.mui-table-view{
  
  li{
    h1{
      font-size: 16px;
    }
    .mui-ellipsis{
      font-size: 12px;
    }
  }
}

*{
  touch-action:pan-y;
}
.mui-slider{
 background:#ccc;
}
</style>


